<template>
  <page-view class="page-view page-view-container" :title="false">

    <div slot="headerContent">
      <div class="title">用户管理</div>
    </div>
    <div class="main-content">
      <div class="form">
        <a-form :form="form">
          <a-form-item class="form-short" label="旧密码" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'oldPwd',
                { initialValue:data.oldPwd,
                  rules: [{ required: true, message: '请输入旧密码' }]}
              ]"
              type="password"
            />
          </a-form-item>

          <a-form-item class="form-short" label="新密码" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'newPwd',
                { initialValue:data.newPwd,
                  rules: [{ required: true, message: '请输入新密码' }]}
              ]"
              type="password"
            />
          </a-form-item>

          <a-form-item class="form-short" label="再次输入新密码" v-bind="formItemLayout">
            <a-input
              v-decorator="[
                'newPwd2',
                { initialValue:data.newPwd2,
                  rules: [{ required: true, message: '请输入确认新密码' }]}
              ]"
              type="password"
            />
          </a-form-item>

          <div class="btn-container">
            <a-row>
              <a-col :span="10" :offset="10">
                <a-button class="primary-btn" @click="updatePassword">保存修改</a-button>
                <a-button @click="handleBack()">取消</a-button>
              </a-col>
            </a-row>

          </div>
        </a-form>
      </div>
    </div>
  </page-view>
</template>

<script>
import { PageView } from '@/components'
export default {
  name: 'EditAccountPwd',
  layout: 'basic-layout',
  components: {
    PageView
  },
  data () {
    return {
      data: { oldPwd: '', Pwd1: '', Pwd2: '' },
      form: this.$form.createForm(this),
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      }
    }
  },
  methods: {
    toEdit (t) {
      if (t === 1) {
        this.$router.push('/system/EditAccountName')
      } else {
        this.$router.push('/system/EditAccountPwd')
      }
    },
    updatePassword () {
      this.form.validateFields((err, values) => {
        console.log('error', err)
        if (values.newPwd !== values.newPwd2) {
          this.$message.error('新旧密码不一致,请检查')
          return
        }
        if (err === null) {
          this.$authApi.updatePassword(values).then(res => {
            if (res.code === '000000') {
              this.$message.success('修改密码成功')
            } else {
              this.$message.error(res.mesg || res.data)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .main-content{
    background: #fff;
    padding:20px;

    .form{
      width: 60%;
    }
  }
</style>
